<template>
  <div class="reminder-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/pet-center'}">宠物中心</el-breadcrumb-item>
      <el-breadcrumb-item>事项提醒</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部 -->
    <el-header class="reminder-header">
      <div class="title">
        <i class="el-icon-alarm-clock"></i>
        宠物事件提醒
      </div>
      <div class="header-actions">
        <el-button
            type="primary"
            icon="el-icon-plus"
            @click="openAddDialog">
          新建提醒
        </el-button>
        <el-select
            v-model="filterType"
            placeholder="全部类型"
            style="width: 120px; margin-left: 15px;">
          <el-option
              v-for="type in reminderTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value">
          </el-option>
        </el-select>
      </div>
    </el-header>

    <!-- 主体内容 -->
    <el-main class="reminder-main">
      <!-- 日历视图 -->
      <el-tabs v-model="activeView">
        <el-tab-pane label="日历视图" name="calendar">
          <el-calendar>
            <template #dateCell="{ date, data }">
              <div class="calendar-day">
                <div class="day-number">{{ data.day.split('-').slice(2).join('-') }}</div>
                <div class="reminder-items">
                  <div
                      v-for="item in getDateReminders(date)"
                      :key="item.id"
                      class="reminder-tag"
                      :class="item.type">
                    {{ item.title }}
                    <i class="el-icon-close" @click.stop="deleteReminder(item.id)"></i>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </el-tab-pane>

        <!-- 列表视图 -->
        <el-tab-pane label="列表视图" name="list">
          <el-table
              :data="filteredReminders"
              style="width: 100%"
              row-class-name="reminder-row">
            <el-table-column prop="time" label="时间" width="180">
              <template #default="{ row }">
                {{ formatTime(row.time) }}
              </template>
            </el-table-column>
            <el-table-column prop="title" label="事件内容">
              <template #default="{ row }">
                <el-tag :type="row.type" size="medium">
                  {{ row.title }}
                </el-tag>
                <span class="remark">{{ row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template #default="{ row }">
                <el-switch
                    v-model="row.completed"
                    active-color="#67C23A"
                    @change="toggleStatus(row)">
                </el-switch>
                <span :class="row.completed ? 'completed' : ''">
                  {{ row.completed ? '已完成' : '待处理' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button
                    type="text"
                    @click="editReminder(row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 新增/编辑对话框 -->
      <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="600px">
        <el-form
            :model="currentReminder"
            :rules="rules"
            ref="reminderForm"
            label-width="100px">
          <el-form-item label="事件标题" prop="title">
            <el-input v-model="currentReminder.title"></el-input>
          </el-form-item>

          <el-form-item label="事件类型" prop="type">
            <el-select v-model="currentReminder.type">
              <el-option
                  v-for="type in reminderTypes"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value">
                <span :class="'type-tag ' + type.value">
                  {{ type.label }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提醒时间" prop="time">
            <el-date-picker
                v-model="currentReminder.time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="重复提醒">
            <el-select v-model="currentReminder.repeat">
              <el-option label="不重复" value="none"></el-option>
              <el-option label="每天" value="daily"></el-option>
              <el-option label="每周" value="weekly"></el-option>
              <el-option label="每月" value="monthly"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提前提醒">
            <el-select v-model="currentReminder.advance">
              <el-option label="准时提醒" value="0"></el-option>
              <el-option label="提前15分钟" value="15"></el-option>
              <el-option label="提前1小时" value="60"></el-option>
              <el-option label="提前1天" value="1440"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注信息">
            <el-input
                type="textarea"
                :rows="3"
                v-model="currentReminder.remark"
                placeholder="请输入备注信息">
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'ReminderSystem',
  data() {
    return {
      activeView: 'calendar',
      filterType: 'all',
      dialogVisible: false,
      currentReminder: this.emptyReminder(),
      reminders: [
        {
          id: 1,
          title: '驱虫药服用',
          type: 'medicine',
          time: '2023-08-15 09:00:00',
          repeat: 'monthly',
          advance: '15',
          remark: '拜耳内驱虫药',
          completed: false
        },
        {
          id: 2,
          title: '年度体检',
          type: 'checkup',
          time: '2023-08-20 14:30:00',
          repeat: 'none',
          advance: '1440',
          remark: '瑞鹏宠物医院预约',
          completed: false
        }
      ],
      reminderTypes: [
        { value: 'vaccine', label: '疫苗提醒' },
        { value: 'medicine', label: '用药提醒' },
        { value: 'checkup', label: '体检提醒' },
        { value: 'bath', label: '洗澡提醒' },
        { value: 'other', label: '其他提醒' }
      ],
      rules: {
        title: [{ required: true, message: '请输入事件标题', trigger: 'blur' }],
        type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
        time: [{ required: true, message: '请选择提醒时间', trigger: 'change' }]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.currentReminder.id ? '编辑提醒' : '新建提醒'
    },
    filteredReminders() {
      return this.reminders.filter(item =>
          this.filterType === 'all' || item.type === this.filterType
      ).sort((a, b) => new Date(a.time) - new Date(b.time))
    }
  },
  methods: {
    emptyReminder() {
      return {
        id: null,
        title: '',
        type: '',
        time: '',
        repeat: 'none',
        advance: '0',
        remark: '',
        completed: false
      }
    },
    openAddDialog() {
      this.currentReminder = this.emptyReminder()
      this.dialogVisible = true
    },
    editReminder(item) {
      this.currentReminder = { ...item }
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs.reminderForm.validate(valid => {
        if (valid) {
          if (!this.currentReminder.id) {
            this.currentReminder.id = Date.now()
            this.reminders.push(this.currentReminder)
          } else {
            const index = this.reminders.findIndex(r => r.id === this.currentReminder.id)
            this.reminders.splice(index, 1, this.currentReminder)
          }
          this.dialogVisible = false
          this.$message.success('保存成功')
        }
      })
    },
    deleteReminder(id) {
      this.reminders = this.reminders.filter(r => r.id !== id)
      this.$message.success('已删除提醒')
    },
    toggleStatus(item) {
      this.$message.success(`已标记为${item.completed ? '已完成' : '待处理'}`)
    },
    getDateReminders(date) {
      return this.reminders.filter(item =>
          item.time.startsWith(date.toISOString().split('T')[0])
      )
    },
    formatTime(time) {
      return new Date(time).toLocaleString()
    }
  }
}
</script>

<style scoped>
.reminder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}

.title {
  font-size: 24px;
  color: #303133;
}

.header-actions {
  display: flex;
  align-items: center;
}

.calendar-day {
  height: 100%;
  padding: 5px;
}

.day-number {
  font-weight: bold;
  margin-bottom: 5px;
}

.reminder-tag {
  font-size: 12px;
  padding: 2px 5px;
  margin: 2px 0;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reminder-tag.vaccine {
  background: #f0faff;
  border: 1px solid #409EFF;
  color: #409EFF;
}

.reminder-tag.medicine {
  background: #fef0f0;
  border: 1px solid #F56C6C;
  color: #F56C6C;
}

.reminder-tag.checkup {
  background: #f0f9eb;
  border: 1px solid #67C23A;
  color: #67C23A;
}

.reminder-tag.bath {
  background: #fdf6ec;
  border: 1px solid #E6A23C;
  color: #E6A23C;
}

.el-icon-close {
  cursor: pointer;
  margin-left: 5px;
}

.remark {
  color: #909399;
  margin-left: 10px;
}

.completed {
  text-decoration: line-through;
  color: #909399;
}

.type-tag {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
}

.type-tag.vaccine {
  background: #409EFF;
  color: white;
}

.type-tag.medicine {
  background: #F56C6C;
  color: white;
}

.type-tag.checkup {
  background: #67C23A;
  color: white;
}

.type-tag.bath {
  background: #E6A23C;
  color: white;
}

@media (max-width: 768px) {
  .reminder-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }

  .header-actions {
    width: 100%;
    margin-top: 15px;
    flex-direction: column;
    align-items: flex-start;
  }

  .el-select {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 10px;
  }
}
</style>